<template>
  <div class="supplier-list-create">
    <div class="container">
      <createTop firstMenu="配料采购" secondMenu="供应商列表" title="添加/编辑"></createTop>
      <el-card shadow="always" v-loading="loading">
        <div class="content">
          <div class="se">
            <div class="content-title">名称 <span class="red-icon">※</span></div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.nickname" placeholder="请输入名称"></el-input>
          </div>
          <div class="se">
            <div class="content-title">编码</div>
            <el-input size="small" :style="{'width':'350px'}" disabled align="left" v-model="data.number" placeholder="系统自动生成"></el-input>
          </div>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">区域</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.area" :rows="5" resize="none" placeholder="请输入权重"></el-input>
          </div>

          <div class="se">
            <div class="content-title">详细地址</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.address" :rows="5" resize="none" placeholder="请输入权重"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">状态</div>
            <template>
              <el-radio-group v-model="data.status" class="radio">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </template>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">优先级</div>
            <div class="tip">(配料价格默认显示1级供应商)</div>
            <el-select :style="{'width':'350px'}" clearable size="small" v-model="data.order" placeholder="优先级">
              <el-option v-for="item in orders" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>

      </el-card>
      <el-card shadow="always" v-loading="loading">
        <div class="content">
          <div class="se">
            <div class="content-title">姓名 <span class="red-icon">※</span></div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.name" placeholder="请输入名称"></el-input>
          </div>

          <div class="se">
            <div class="content-title">手机</div>
            <el-input size="small" :style="{'width':'350px'}" align="left" v-model="data.tel" placeholder="请输入编号"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">职位</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.job" :rows="5" resize="none" placeholder="请输入权重"></el-input>
          </div>

          <div class="se">
            <div class="content-title">email</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.email" :rows="5" resize="none" placeholder="请输入权重"></el-input>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          财务信息
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">开户名称</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.account_name" placeholder="请输入名称"></el-input>
          </div>
          <div class="se">
            <div class="content-title">开户银行</div>
            <el-input size="small" :style="{'width':'350px'}" align="left" v-model="data.bank" placeholder="请输入编号"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">银行账号</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.account" :rows="5" resize="none" placeholder="请输入账号"></el-input>
          </div>
          <div class="se">
            <div class="content-title">发票抬头</div>
            <el-input size="small" :style="{'width':'350px'}" v-model="data.invoice" :rows="5" resize="none" placeholder="请输入发票抬头"></el-input>
          </div>
            
        </div>
      </el-card>

      <saveBtn @confirm="confirm"></saveBtn>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class SupplierListCreate extends Vue {
  pageName: string = '';
  secondMenu: string = '';
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  // 客户名称

  data: any = {
    nickname: '',
    // 区域
    area: '',
    address: '',
    // 人
    name: '',
    tel: '',
    job: '',
    email: '',
    // 财务
    account_name: '',
    bank: '',
    account: '',
    invoice: '',
    order: '1',
    status: 1
  };

  orders: any[] = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
    { value: '4', label: '4' },
    { value: '5', label: '5' }
  ];
  number: string = '';

  loading: boolean = false;
  id!: string;
  mounted() {
    console.log(this.$route.query);
    if (this.$route.query.edit) {
      this.pageName = '编辑客户';
      this.id = this.$route.query.id;
      this.infoRes = new ajaxResquest('/purchase/getSuppliersInfo');
      this.getInfo();
    } else {
      this.pageName = '新增客户';
    }
    this.createRes = new ajaxResquest('/purchase/suppliersToDo');
  }
  getInfo(): void {
    this.infoRes.getFunction({ id: this.id }).then((res: any) => {
      console.log(res);
      if (res.data.code === 1) {
        console.log(res.data.data.types.info[0]);
        // this.data=res.data.data.types.info[0]
        let temp: any = res.data.data.types.info[0];
        this.data = temp;
        // this.data.area = temp.area;
        // this.data.address = temp.address;
        // Object.keys(temp).forEach((key: any) => {
        //   if (key in this.data) {
        //     this.data[key] = temp[key];
        //   }
        // });
        console.log(this.data);
      }
    });
  }
  confirm(): void {
    // let data: any = {
    //   nickname: this.nickname,
    //   area: this.area,
    //   address: this.address,
    //   name: this.name,
    //   tel: this.tel,
    //   job: this.job,
    //   email: this.email,
    //   order: this.order,
    //   status: this.status,
    //   account_name: this.account_name,
    //   bank: this.bank,
    //   account: this.account,
    //   invoice: this.invoice,
    // };
    let data: any = this.data;
    if (this.$route.query.id) {
      data = { ...data, id: this.$route.query.id };
    }
    // data = JSON.stringify(data);
    this.createRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.$to('supplierList');
      }
    });
  }
}
</script>
<style lang="less">
.supplier-list-create {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow: auto;

  .el-card {
    overflow-y: auto;
    margin-bottom: 20px;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 30px;
      margin-top: 10px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .confirm {
    margin-top: 0;
  }
  .card-title {
    text-align: left;
    font-weight: 600;
  }
  .radio {
    width: 300px;
    display: flex;
    margin-top: 10px;
    // flex-direction: column;
  }
}
</style>
